<template>
  <v-app>
    <my-menu />

    <v-main class="grey darken-1 mt-9" id="mainPage">
      <div class="text-sm-left mb-9">
        <v-row>
          <v-col cols="12" sm="2">
            <v-sheet
              v-show="!$store.state.adminState"
              rounded="lg"
              color="white"
              elevation="9"
              outlined
              class="ma-2 mt-10 pb-10"
            >
              <left-section />
            </v-sheet>
          </v-col>

          <v-col cols="12" :sm="$store.state.mainSm">
            <v-sheet
              rounded="lg"
              color="white"
              elevation="9"
              outlined
              class="ma-2 mt-10"
            >
              <keep-alive :exclude="['ArticleList', 'PageDetail']">
                <router-view></router-view>
              </keep-alive>
            </v-sheet>
          </v-col>

          <v-col cols="12" sm="2">
            <v-sheet
              v-show="!$store.state.adminState"
              rounded="lg"
              color="white"
              elevation="9"
              outlined
              class="ma-2 mt-10"
            >
              <right-section />
            </v-sheet>
          </v-col>
        </v-row>
      </div>
    </v-main>
    <my-footer />
  </v-app>
</template>

<script>
import MyMenu from "./components/MyMenu.vue";
import MyFooter from "./components/MyFooter.vue";
import LeftSection from "./components/LeftSection.vue";
import RightSection from "./components/RightSection.vue";

export default {
  name: "App",

  components: {
    MyFooter,
    MyMenu,
    LeftSection,
    RightSection,
  },
};
</script>


<style scoped>
#mainPage {
  box-shadow: 0 0 6px 3px #a1a1a1;
}
</style>

